<template>
    <!-- 二维码打印-->
  <div v-if="content != ''" style="display:inline-block" @click="printQcode" v-print="'#print'">
    <a-row type="flex" justify="center" align="middle" id="print" ref="print" class="qrcodeBox">
      <div ref="qrcode"></div>
    </a-row>
    <slot />
  </div>
  <div v-else style="display:inline-block" @click="printQcode">
    <slot />
  </div>
</template>

<script>
import QRCode from 'qrcodejs2' // 二维码

export default {
  props: {
    // 二维码内容
    content:{
      type: String,
      default: () => '',
    },
    // 二维码宽度
    width: {
      type: [Number, String],
      default: () => 300,
    },
    // 二维码高度
    height: {
      type: [Number, String],
      default: () => 300,
    },
    // 二维码颜色
    colorDark: {
      type: [String],
      default: () => '#333333',
    },
    // 二维码背景色
    colorLight: {
      type: [String],
      default: () => '#ffffff',
    },
  },
  methods: {
    // 打印二维码
    printQcode() {
      if(!this.content){
        this.$message.warning('二维码内容不能为空！')
        return
      }
      //必须要等到页面加载完成，不然会报错
      this.$nextTick(() => {
        this.$refs.qrcode.innerHTML = ''
        new QRCode(this.$refs.qrcode, {
          text: this.content, //二维码内容
          width: this.width, // 二维码宽度
          height: this.height, // 二维码高度
          colorDark: this.colorDark, //二维码颜色
          colorLight: this.colorLight, //二维码背景色
        })
      })
    },
  },
}
</script>

<style scoped>
.qrcodeBox {
  position: absolute;
  left: 0;
  z-index: -1;
  width: 100%;
  height: calc(100% - 24px);
}
</style>
